又要來到一年一度的鐵人賽啦~先來一個禮拜的工具複習吧，這禮拜姑且先複習些幫助開發的工具吧

本日主題： Webpack 4

前言：為甚麼我們需要 Webpack 呢
從網頁開發這概念出現到現在歷經了許多的概念與想法，其中不乏有些已經開始無法適應現代大型開發的概念，以專案管理來說，從以前的義大利麵式到如今的分離式，中間有多少工程師的血與淚就不是這次的主題了；一個良好的專案管理可以幫助開發者釐清自己的思緒，幫助接手的人或是團隊能夠迅速理解目前的狀況，並且統一資源，這就是今天的主角 Webpack 可以幫助你做到的事!

正式啟用：

1. 確認本地環境有安裝 node.js 以及 npm
2. 進入專案目錄，執行專案初始化 npm init
3. 安裝 webpack 以及 webpack-cli npm install webpack webpack-cli --save-dev
4. 建立資料夾 src ，以後大部分檔案皆會在此目錄中，並在內建立一檔案 index.js
5. 再建立一檔案，取名為 bar.js，放到 src/script 此位置其內部內容如下

export default function bar(){
    document.write('this is bar script');
}

6. 回到 index.js 將我們已經建立的 bar.js 引用進來

import bar from './script/bar.js';
bar();

7. 回到根目錄，並創立一檔案，名為 webpack.config.js，其內部內容如下

const path = require('path') // 引用 path 模組
module.exports = {
    entry: './src/index.js', //設立進入點
    output: {
        filename: 'bundle.js', //設立產出檔案名稱
        path: path.resolve(__dirname,'dist') //設立產出目錄
    }
}

8. 在根目錄中的 package.json 內 scripts 區塊添加一指令，並執行npm run start

"script": {
    "start": "webpack" //使 npm 能夠編譯 webpack
}

9. 建立一 html 檔案，並引用 dist/bundle.js 就可以看到效果囉

今天先大致介紹 webpack 最基本的編譯功能，我們可以看到 dist/bundle.js 中已經跟我們一開始建立的檔案不一樣了，後續有更多的內容可以去專研，剩下的就隔天再說吧~